<script lang="ts" setup>
import { onUnmounted, onMounted, watch } from 'vue'
// @ts-ignore
import EditorViewer from '@toast-ui/editor/viewer'
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'
import Prism from 'prismjs'

export interface AnswerBoxProps {
  answer: string
}

const props = defineProps<AnswerBoxProps>()

let editor: any

function initAnswerBox() {
  editor = new EditorViewer({
    el: document.querySelector(`#answerBox`),
    language: 'zh-CN',
    plugins: [[codeSyntaxHighlight, { highlighter: Prism }]],
  })
  updateAnswerBox()
}

onMounted(initAnswerBox)
onUnmounted(() => {
  if (!editor) return
  editor.destroy()
})
function updateAnswerBox() {
  if (!editor) return
  editor.setMarkdown(props.answer, false)
}

watch(() => props.answer, updateAnswerBox)
</script>

<template>
  <div id="answerBox"></div>
</template>
